<template>
	<div class="content">
		<hunanMap class="hunanmapBox"></hunanMap>
		<div class="headerBox">
			<img src="@/assets/img/guangxiao.png" alt="" />
			<div class="time">
				<span>{{ currentTime }}</span>
				<span>{{ currentDate }}</span>
			</div>
			<div class="logoBox"></div>
			<div class="weatherBox">
				<div class="jumpBox" @click="goHome">返回首页</div>

				<span>天气：</span>
				<span>晴</span>
			</div>
		</div>
		<div class="contentBox">
			<div class="leftSidebar">
				<div class="EquipmentResourcesBox">
					<!-- 设备资源 -->
					<EquipmentResources />
				</div>
				<div class="EquipmentListBox">
					<!-- 设备列表 -->
					<EquipmentList />
				</div>
			</div>
			<div class="rightSidebar">
				<div class="EventAnalysisBox">
					<!-- 事件分析 -->
					<EventAnalysis />
				</div>
				<div class="InspectionRecordBox">
					<!-- 巡检记录 -->
					<InspectionRecord />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import hunanMap from '@/components/map.vue';
import EquipmentList from '@/view/home/components/EquipmentList.vue';
import EquipmentResources from '@/view/home/components/EquipmentResources.vue';
import InspectionRecord from '@/view/home/components/InspectionRecord.vue';
import EventAnalysis from '@/view/home/components/EventAnalysis.vue';

import { ref, onMounted } from 'vue';

import { useRouter } from 'vue-router';
const router = useRouter();

const goHome = () => {
	router.push('/home');
};

// 响应式数据
const currentTime = ref('');
const currentDate = ref('');

// 获取星期几
const getWeekday = (dayIndex) => {
	const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	return weekdays[dayIndex];
};

// 定义更新时间和日期的方法
const updateDateTime = () => {
	const now = new Date();

	// 获取时间部分（时：分：秒）
	const hours = String(now.getHours()).padStart(2, '0');
	const minutes = String(now.getMinutes()).padStart(2, '0');
	const seconds = String(now.getSeconds()).padStart(2, '0');
	currentTime.value = `${hours}:${minutes}:${seconds}`;

	// 获取日期部分（年-月-日）
	const year = now.getFullYear();
	const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
	const day = String(now.getDate()).padStart(2, '0');
	const weekday = getWeekday(now.getDay()); // 获取星期几

	currentDate.value = `${year}-${month}-${day}   ${weekday}`;
};

onMounted(() => {
	updateDateTime();
	setInterval(updateDateTime, 1000);
});
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	position: relative;

	.headerBox {
		z-index: 99;
		position: absolute;
		// width: 100%;
		height: 85px;
		margin: 0 26px;
		top: 20px;
		background: url('@/assets/img/topBg.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 32px;
		height: 83px;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
		> img {
			top: 50px;
			position: absolute;
		}
		.time {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 20px;

			span:nth-child(1) {
				font-weight: 500;
				font-size: 24px;
				color: #09b1ff;
				font-family: DINPro, DINPro;
			}

			span:nth-child(2) {
				font-weight: 500;
				font-family: DINPro, DINPro;
				font-size: 16px;
				color: #09b1ff;
			}
		}

		.logoBox {
			width: 539px;
			height: 56px;
			background: url('@/assets/img/logo.png') no-repeat center center;
			background-size: cover;
		}

		.weatherBox {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 10px;
			justify-content: flex-end;

			.jumpBox {
				margin-right: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				font-size: 16px;
				color: #128cff;
				width: 108px;
				height: 43px;
				background: url('@/assets/img/topmenuBG.png') no-repeat center center;
				background-size: 100% 100%;
			}

			span {
				font-weight: 400;
				font-size: 16px;
				color: #09b1ff;
			}
		}
	}

	.contentBox {
		z-index: 99;
		pointer-events: none;
		width: 100%;
		height: calc(100% - 105px);
		display: flex;
		position: absolute;
		top: 105px;
		justify-content: space-between;

		.leftSidebar,
		.rightSidebar {
			width: 440px;
			display: flex;
			flex-direction: column;

			.EquipmentResourcesBox,
			.EquipmentListBox,
			.EventAnalysisBox,
			.InspectionRecordBox {
				margin-top: 30px;
			}
		}

		.leftSidebar {
			.EquipmentResourcesBox {
				height: 34.6vh;
			}

			.EquipmentListBox {
				height: 48.5vh;
			}
		}

		.rightSidebar {
			.EventAnalysisBox {
				height: 45.6vh;
			}

			.InspectionRecordBox {
				height: 33.6vh;
			}
		}
	}

	.hunanmapBox {
		position: absolute;
	}
}
</style>
